<script setup>
import { ref } from 'vue'

// 用户信息
const userInfo = ref({
  name: '音乐爱好者',
  avatar: '🎵',
  followers: 128,
  following: 256
})

// 动态列表
const posts = ref([
  {
    id: 1,
    user: {
      name: '小明',
      avatar: '🎸'
    },
    content: '分享一首超好听的歌！',
    track: {
      title: '晴天',
      artist: '周杰伦',
      cover: '/images/covers/default.jpg'
    },
    likes: 66,
    comments: 12,
    shares: 8,
    time: '10分钟前',
    isLiked: false
  },
  {
    id: 2,
    user: {
      name: '小红',
      avatar: '🎹'
    },
    content: '今天的氛围歌单',
    playlist: {
      title: '轻音乐合集',
      tracks: ['River Flows in You', 'Kiss the Rain', 'Summer'],
      cover: '/images/covers/default.jpg'
    },
    likes: 45,
    comments: 8,
    shares: 5,
    time: '30分钟前',
    isLiked: true
  }
])

// 热门话题
const topics = ref([
  {
    tag: '#新歌推荐',
    count: '2.8k讨论'
  },
  {
    tag: '#音乐分享',
    count: '1.5k讨论'
  },
  {
    tag: '#歌单推荐',
    count: '988讨论'
  }
])

// 推荐用户
const recommendUsers = ref([
  {
    name: '音乐达人',
    avatar: '🎼',
    fans: '12.8k',
    tags: ['流行', '摇滚']
  },
  {
    name: '乐评人',
    avatar: '🎯',
    fans: '8.6k',
    tags: ['乐评', '古典']
  }
])

// 点赞动态
const toggleLike = (post) => {
  post.isLiked = !post.isLiked
  post.likes += post.isLiked ? 1 : -1
}

// 分享动态
const sharePost = (post) => {
  // 实现分享逻辑
  alert('分享成功')
}

// 发布动态
const newPost = ref('')
const publishPost = () => {
  if (!newPost.value.trim()) return
  
  posts.value.unshift({
    id: Date.now(),
    user: {
      name: userInfo.value.name,
      avatar: userInfo.value.avatar
    },
    content: newPost.value,
    likes: 0,
    comments: 0,
    shares: 0,
    time: '刚刚',
    isLiked: false
  })
  
  newPost.value = ''
}
</script>

<template>
  <div class="social-page">
    <!-- 左侧个人信息 -->
    <div class="user-section">
      <div class="user-card">
        <div class="user-avatar">{{ userInfo.avatar }}</div>
        <h2>{{ userInfo.name }}</h2>
        <div class="user-stats">
          <div class="stat-item">
            <div class="stat-value">{{ userInfo.followers }}</div>
            <div class="stat-label">关注者</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ userInfo.following }}</div>
            <div class="stat-label">正在关注</div>
          </div>
        </div>
      </div>

      <div class="topics-card">
        <h3>热门话题</h3>
        <div class="topics-list">
          <div 
            v-for="topic in topics"
            :key="topic.tag"
            class="topic-item"
          >
            <div class="topic-tag">{{ topic.tag }}</div>
            <div class="topic-count">{{ topic.count }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 中间动态流 -->
    <div class="feed-section">
      <!-- 发布框 -->
      <div class="publish-card">
        <textarea
          v-model="newPost"
          placeholder="分享你的音乐心情..."
          class="post-input"
        ></textarea>
        <div class="publish-actions">
          <button class="action-btn">
            🎵 音乐
          </button>
          <button class="action-btn">
            🎬 视频
          </button>
          <button 
            class="publish-btn"
            @click="publishPost"
          >
            发布
          </button>
        </div>
      </div>

      <!-- 动态列表 -->
      <div class="posts-list">
        <div 
          v-for="post in posts"
          :key="post.id"
          class="post-card"
        >
          <div class="post-header">
            <div class="post-user">
              <span class="user-avatar">{{ post.user.avatar }}</span>
              <span class="user-name">{{ post.user.name }}</span>
            </div>
            <span class="post-time">{{ post.time }}</span>
          </div>

          <div class="post-content">{{ post.content }}</div>

          <!-- 音乐卡片 -->
          <div 
            v-if="post.track"
            class="music-card"
          >
            <img 
              :src="post.track.cover"
              :alt="post.track.title"
              class="music-cover"
            >
            <div class="music-info">
              <div class="music-title">{{ post.track.title }}</div>
              <div class="music-artist">{{ post.track.artist }}</div>
            </div>
            <button class="play-btn">▶️</button>
          </div>

          <!-- 歌单卡片 -->
          <div 
            v-if="post.playlist"
            class="playlist-card"
          >
            <img 
              :src="post.playlist.cover"
              :alt="post.playlist.title"
              class="playlist-cover"
            >
            <div class="playlist-info">
              <div class="playlist-title">{{ post.playlist.title }}</div>
              <div class="playlist-tracks">
                <div 
                  v-for="(track, index) in post.playlist.tracks"
                  :key="index"
                  class="track-name"
                >
                  {{ track }}
                </div>
              </div>
            </div>
          </div>

          <div class="post-actions">
            <button 
              class="action-btn"
              :class="{ active: post.isLiked }"
              @click="toggleLike(post)"
            >
              ❤️ {{ post.likes }}
            </button>
            <button class="action-btn">
              💬 {{ post.comments }}
            </button>
            <button 
              class="action-btn"
              @click="sharePost(post)"
            >
              🔄 {{ post.shares }}
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧推荐 -->
    <div class="recommend-section">
      <div class="recommend-card">
        <h3>推荐关注</h3>
        <div class="recommend-list">
          <div 
            v-for="user in recommendUsers"
            :key="user.name"
            class="recommend-item"
          >
            <div class="user-info">
              <span class="user-avatar">{{ user.avatar }}</span>
              <div class="user-detail">
                <div class="user-name">{{ user.name }}</div>
                <div class="user-fans">{{ user.fans }}粉丝</div>
              </div>
            </div>
            <div class="user-tags">
              <span 
                v-for="tag in user.tags"
                :key="tag"
                class="tag"
              >
                {{ tag }}
              </span>
            </div>
            <button class="follow-btn">
              关注
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.social-page {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 250px 1fr 300px;
  gap: 2rem;
  padding: 2rem;
}

/* 左侧个人信息样式 */
.user-card {
  background-color: var(--bg-light);
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  margin-bottom: 2rem;
}

.user-avatar {
  width: 80px;
  height: 80px;
  background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 auto 1rem;
}

.user-card h2 {
  margin: 0;
  margin-bottom: 1.5rem;
}

.user-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.stat-value {
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 0.3rem;
}

.stat-label {
  color: var(--text-gray);
  font-size: 0.9rem;
}

.topics-card {
  background-color: var(--bg-light);
  border-radius: 16px;
  padding: 1.5rem;
}

.topics-card h3 {
  margin: 0;
  margin-bottom: 1.5rem;
  color: var(--text-gray);
}

.topics-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.topic-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.topic-tag {
  color: var(--primary-color);
}

.topic-count {
  color: var(--text-gray);
  font-size: 0.9rem;
}

/* 中间动态流样式 */
.publish-card {
  background-color: var(--bg-light);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.post-input {
  width: 100%;
  height: 100px;
  padding: 1rem;
  background-color: var(--bg-dark);
  border: none;
  border-radius: 8px;
  color: var(--text-light);
  resize: none;
  margin-bottom: 1rem;
}

.publish-actions {
  display: flex;
  gap: 1rem;
}

.action-btn {
  padding: 0.8rem 1.5rem;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-gray);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-btn:hover,
.action-btn.active {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--primary-color);
}

.publish-btn {
  margin-left: auto;
  padding: 0.8rem 2rem;
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.publish-btn:hover {
  background-color: var(--secondary-color);
}

.post-card {
  background-color: var(--bg-light);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.post-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.post-user {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.post-time {
  color: var(--text-gray);
  font-size: 0.9rem;
}

.post-content {
  margin-bottom: 1rem;
  line-height: 1.5;
}

.music-card,
.playlist-card {
  background-color: var(--bg-dark);
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.music-cover,
.playlist-cover {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  object-fit: cover;
}

.music-info,
.playlist-info {
  flex: 1;
}

.music-title,
.playlist-title {
  margin-bottom: 0.3rem;
}

.music-artist,
.track-name {
  color: var(--text-gray);
  font-size: 0.9rem;
}

.play-btn {
  background: none;
  border: none;
  color: var(--text-light);
  font-size: 1.5rem;
  cursor: pointer;
}

.post-actions {
  display: flex;
  gap: 2rem;
}

/* 右侧推荐样式 */
.recommend-card {
  background-color: var(--bg-light);
  border-radius: 16px;
  padding: 1.5rem;
}

.recommend-card h3 {
  margin: 0;
  margin-bottom: 1.5rem;
  color: var(--text-gray);
}

.recommend-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.recommend-item {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.user-detail {
  flex: 1;
}

.user-fans {
  color: var(--text-gray);
  font-size: 0.9rem;
}

.user-tags {
  display: flex;
  gap: 0.5rem;
}

.tag {
  padding: 0.2rem 0.5rem;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  font-size: 0.8rem;
  color: var(--text-gray);
}

.follow-btn {
  width: 100%;
  padding: 0.8rem;
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.follow-btn:hover {
  background-color: var(--secondary-color);
}

@media (max-width: 1200px) {
  .social-page {
    grid-template-columns: 1fr;
  }

  .user-section,
  .recommend-section {
    display: none;
  }
}
</style>